<!-- 动态图片 -->
<template>
    <view class="square-item-img">
        <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(item, i) in props.imgList" :key="value"  @click="photoView(i)">
                <van-image fit="cover" class="square-item-img-item" :src="item.Path" :key="item.ID" radius="8"/>
            </van-grid-item>
        </van-grid>
    </view>
    <van-image-preview v-model:show="state.show" :images="state.images" teleport="body">
        <!-- <template v-slot:index>第页</template> -->
        <template #image="{ src }" v-slot:index>
            <van-image class="my-swipe-inner-layer-img" :src="src" fit="contain" />
        </template>
    </van-image-preview>
</template>
    
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import { ImagePreview } from 'vant';

const props = defineProps(['imgList'])

const state = reactive({
    imgList: props.imgList,
    userId: "",
    show: false
})

const showImg = () => {
    state.images = props.imgList.map(o => o.Path)
    state.show = true
}

let index = ref(0)
// 查看图片
const photoView = (i) => {
    index.value = i
    showImg()
}

// const

</script>
    
<style lang="scss" scoped>
.square-item-img-item{
    width: 100%;
    height: 200rpx;
}
</style>
    